<script>
import { defineComponent, reactive, toRefs, onMounted, watch } from "vue";

export default defineComponent({
  name: "LevelInput",
  props: {
    label: {
      type: String,
      default: "",
    },
    level: {
      type: Number,
      default: 0,
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      currentLevel: 0,
    });

    onMounted(() => {
      state.currentLevel = props.level;
    });

    watch(
      () => props.level,
      (e) => {
        state.currentLevel = e;
      }
    );

    watch(
      () => state.currentLevel,
      (e) => {
        emit("update:level", e);
        emit("changeIndex", e);
      }
    );

    const handleInputChange = (e) => {
      if (state.currentLevel === 0) {
        return;
      }
      // console.log(e.target.value, state.currentLevel)
      const inputValue = parseInt(e.target.value);
      if (inputValue < props.list[0]) {
        state.currentLevel = props.list[0];
      } else if (inputValue > props.list[props.list.length - 1]) {
        state.currentLevel = props.list[props.list.length - 1];
      } else {
        state.currentLevel = inputValue;
      }
    };

    const handleLast = () => {
      if (state.currentLevel === 0) {
        return;
      }
      let index = props.list.indexOf(state.currentLevel);
      if (index > 1) {
        index--;
      } else {
        index = 0;
      }
      state.currentLevel = props.list[index];
    };

    const handleNext = () => {
      if (state.currentLevel === 0) {
        return;
      }
      let index = props.list.indexOf(state.currentLevel);
      if (index < props.list.length - 2) {
        index++;
      } else {
        index = props.list.length - 1;
      }
      state.currentLevel = props.list[index];
    };

    return {
      ...toRefs(state),
      handleInputChange,
      handleLast,
      handleNext,
    };
  },
});
</script>

<template>
  <div class="component-level-input-container">
    <div class="label">{{ label }}</div>
    <div class="level-container">
      <div class="ctrl --last" @click="handleLast">-</div>
      <div class="level-input">
        <input :value="currentLevel" @change="handleInputChange" />
      </div>
      <div class="ctrl --next" @click="handleNext">+</div>
    </div>
  </div>
</template>

<style lang="scss">
.component-level-input-container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .label {
    width: 64px;
    font-size: 12px;
  }

  .level-container {
    width: calc(100% - 76px);
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .ctrl {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 600;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
    }

    .level-input {
      width: calc(100% - 88px);
      height: 32px;
      border: 1px solid #a8a7a7;
      border-radius: 6px;
      padding: 4px 12px;

      input {
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
        text-align: center;
      }
    }
  }
}
</style>
